<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">

        <!-- 
            v-for 用于遍历数组或者对象，生成对应的元素，在标签上使用，进行循环渲染元素
         -->
         <ul>
            <!-- item数组中的每一项 -->
            <!-- <li v-for="item in arr">{{item.name}}</li> -->

            <!-- 拿到数组中遍历时 下标 -->
            <!-- <li v-for="(item, index) in arr" :key="item.name">{{index}} - {{item.name}}</li> -->

            <!-- 需求：渲染arr数组，只渲染state值为true的 -->
            <!-- vue3中，v-for 先写  然后再写v-if -->
            <!-- <li v-for="item in arr" v-if="item.state"> {{item.name}}</li> -->
            <!-- <template v-for="(item, index) in arr">
                <li v-if="item.state">{{item.name}}</li>
            </template> -->


            <!-- 对象 -->
            <!-- <li v-for="item in obj">{{item}}</li> -->
         </ul>
        
    </div>



    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    // json对象
                    jsonobj: {
                        "key": "123",
                        "name": "旺财"
                    },
                    // 数组
                    arr: [
                        {
                            name: '张三',
                            state: true
                        },
                        {
                            name: '李四',
                            state: false
                        },
                        {
                            name: '招财',
                            state: true
                        },
                        {
                            name: '元宝',
                            state: false
                        },
                    ],
                    // 对象
                    obj: {
                        name: 'jack',
                        age: 18,
                        sex: '男'
                    }
                }
            }
        }).mount('#app')




    </script>
</body>

</html>